<template>
	<view class="App_col App_bg">
		<!--  #ifdef H5 -->
		<app-header></app-header>
		<!--  #endif -->
		<text class="tips">输入你的手机号</text>
		<view class="wrapphone">
			<text>+86</text>
			<input placeholder="请输入手机号码" maxlength="11" type="number"
				name="phone" id="phone" autofocus="autofocus"
				v-model="phone" />
		</view>
		<text class="info">开启一键获客</text>
		<view class="next_page">
			<navigator class="no_avtive">下一步</navigator>
			<!-- <navigator class="next_avtive">下一步</navigator> -->
		</view>
	</view>
</template>

<script>
import AppHeader from '@/components/App_transparent_header'
export default {
	name: 'login-phone',
	components: {
		'app-header': AppHeader
	},
	data() {
		return {
			phone: ''
		}
	}
}
</script>

<style scoped>
@import url("../../../static/css/module/loginProcess.scss");

.tips {
    margin-top: 91px;
    font-size: 52px;
	font-weight: normal;
    font-stretch: normal;
    line-height: 1;
	letter-spacing: 1px;
	color: #040404;
}

.info {
	margin-top: 30px;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 1;
	letter-spacing: 0.5px;
	color: #999999;
}

.next_page {
    width: 540px;
    height: 105px;
    margin-top: 60px;
    float: left;
}

.wrapphone {
    width: 540px;
	height: 100px;
	display: flex;
    margin-top: 59px;
    border: 2px solid #dddddd;
    border-radius: 50px;
    margin-bottom: 30px;
    background: white;
}

.wrapphone text {
	padding: 0 22px 0 32px;
    line-height: 100px;
	font-size: 34px;
	position: relative;
}

.wrapphone text::after {
	content: '';
	width: 2px;
	height: 25px;
	background-color: #dddddd;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.wrapphone input {
	padding-left: 20px;
    height: 60px;
	/* width: 70%; */
	width: 100%;
    font-size: 34px;
    /* text-indent: 20px; */
    border: none;
    margin-top: 20px;
}

</style>
